<template>
  <div class="table">
    <table>
      <colgroup>
        <col width="20" />
        <col width="40" />
        <col width="40" />
      </colgroup>
      <thead>
        <tr>
          <th>排行</th>
          <th>名称</th>
          <th>地区</th>
        </tr>
      </thead>
    </table>
    <div class="mtable" :style="height?'max-height:'+height+'px':''">
      <table>
        <colgroup>
          <col width="20" />
          <col width="40" />
          <col width="40" />
        </colgroup>
        <tbody>
          <tr>
            <td>
              <i>1</i>
            </td>
            <td>这是名称</td>
            <td>这是地区</td>
          </tr>
          <tr>
            <td>
              <i>2</i>
            </td>
            <td>这是名称</td>
            <td>这是地区</td>
          </tr>
          <tr>
            <td>
              <i>3</i>
            </td>
            <td>这是名称</td>
            <td>这是地区</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    height: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style>
.table {
  padding: 20px 0 20px 21px;
  text-align: center;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.6);
}
.table table {
  width: 100%;
  border-collapse: collapse;
}
.table input[type="checkbox"] {
  background-color: transparent;
}

.table .check {
  position: relative;
  width: 48px;
}

.table .check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 18px;
  left: 17px;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.table .check span {
  position: absolute;
  top: 18px;
  left: 17px;
  width: 12px;
  height: 12px;
  border: 1px solid #999;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.table .check input[type="checkbox"]:checked + span {
  background-color: rgba(255, 255, 255, 0.6);
}
.table table thead {
  background-color: rgba(255, 255, 255, 0.3);
}
.table table th,
.table table td {
  font-size: 14px;
  font-family: PingFangSC;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  line-height: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.table table td i {
  font-style: normal;
  display: block;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin: 0 auto;
}

.table table th {
  font-weight: 500;
}
.mtable {
  overflow: auto;
}

.mtable tbody tr:hover {
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.05);
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.mtable::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: transparent;
  display: initial;
}
/*定义滚动条轨道 内阴影+圆角*/
.mtable::-webkit-scrollbar-track {
  background-color: transparent;
}
/*定义滑块 内阴影+圆角*/
.mtable::-webkit-scrollbar-thumb {
  border-radius: 6px;
  -webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.15);
  background-color: rgba(255, 255, 255, 0.3);
}
.mtable::-webkit-scrollbar-corner {
  background-color: transparent;
}
</style>